import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';
const BarChart=({
    barTitle,xData,sData,barName,style={ width: '400px', height: '300px' }
})=>{ 
    const chartRef=useRef(null);
    useEffect(()=>{ 
        const chartDom=chartRef.current;
        const myChart=echarts.init(chartDom)
        const option = {
        title: {
          text: barTitle
        },
        xAxis: {
            type: 'category',
            data: xData
        },
        yAxis: {
            type: 'value'
        },
        series: [
          {
            name: barName,
            type: 'bar',
            data: sData
          }
        ]
      };
      myChart.setOption(option);
    },[])
    return  <div ref={chartRef} style={style}></div>
}
export default BarChart